<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../../../assets/docs.css" rel="stylesheet" type="text/css" media="screen" />
<title>MooTools 1.3 Documentation -Fx/Fx.Transitions</title>
</head>

<body>
  <div id="docs" class="doc">
    <div class="methods">
      <h4 class="menu-item"><a href="#Fx">Fx</a></h4>
      <h4 class="menu-item"><a href="#Fx-Transitions">Fx.Transitions</a></h4>
      <div class="menu-item"><a href="#Fx-Transitions:linear">linear</a></div>
      <div class="menu-item"><a href="#Fx-Transitions:quad">quad</a></div>
      <div class="menu-item"><a href="#Fx-Transitions:cubic">cubic</a></div>
      <div class="menu-item"><a href="#Fx-Transitions:quart">quart</a></div>
      <div class="menu-item"><a href="#Fx-Transitions:quint">quint</a></div>
      <div class="menu-item"><a href="#Fx-Transitions:pow">pow</a></div>
      <div class="menu-item"><a href="#Fx-Transitions:expo">expo</a></div>
      <div class="menu-item"><a href="#Fx-Transitions:circ">circ</a></div>
      <div class="menu-item"><a href="#Fx-Transitions:sine">sine</a></div>
      <div class="menu-item"><a href="#Fx-Transitions:back">back</a></div>
      <div class="menu-item"><a href="#Fx-Transitions:bounce">bounce</a></div>
      <div class="menu-item"><a href="#Fx-Transitions:elastic">elastic</a></div>
      <h4 class="menu-item"><a href="#Fx-Transition">Fx.Transition</a></h4>
    </div>
    <div class="l-border r-border span-15 content">
      <h1 id="Fx"><a href="#Fx">Class: Fx</a></h1>
      <p class="description">Fx.Transitions overrides the base <a href="../../../docs/core/Fx/Fx.html">Fx</a> constructor, and adds the possibility to use the transition option as string.</p>
      <h3>Transition option:</h3>
      <p>The equation to use for the effect. See <a href="#Fx-Transitions">Fx.Transitions</a>. It accepts both a function (ex: Fx.Transitions.Sine.easeIn) or a string ('sine:in', 'bounce:out' or 'quad:in:out') that will map to Fx.Transitions.Sine.easeIn / Fx.Transitions.Bounce.easeOut / Fx.Transitions.Quad.easeInOut</p>
      <h1 id="Fx-Transitions"><a href="#Fx-Transitions">Object: Fx.Transitions</a></h1>
      <p class="description">A collection of tweening transitions for use with the <a href="../../../docs/core/Fx/Fx.html">Fx</a> classes.</p>
      <h3>Examples:</h3>
      <pre class="javascript">$<span class="br0">(</span><span class="st0">'myElement'</span><span class="br0">)</span>.<span class="me1">set</span><span class="br0">(</span><span class="st0">'tween'</span>, <span class="br0">{</span>transition: Fx.<span class="me1">Transitions</span>.<span class="me1">Elastic</span>.<span class="me1">easeOut</span><span class="br0">}</span><span class="br0">)</span>;
$<span class="br0">(</span><span class="st0">'myElement'</span><span class="br0">)</span>.<span class="me1">tween</span><span class="br0">(</span><span class="st0">'margin-top'</span>, <span class="nu0">100</span><span class="br0">)</span>;

</pre>
      <h3>See also:</h3>
      <ul>
        <li><a href="http://www.robertpenner.com/easing/">Robert Penner's Easing Equations</a></li>
      </ul>
      <h3>Note:</h3>
      <p>Since MooTools 1.3 this is a native JavaScript Object and not an instance of the deprecated Hash</p>
      <h2 id="Fx-Transitions:linear"><a href="#Fx-Transitions:linear">Fx.Transitions Method: linear</a></h2>
      <p class="description">Displays a linear transition.</p>
      <h2 id="Fx-Transitions:quad"><a href="#Fx-Transitions:quad">Fx.Transitions Method: quad</a></h2>
      <p class="description">Displays a quadratic transition. Must be used as Quad.easeIn or Quad.easeOut or Quad.easeInOut.</p>
      <h2 id="Fx-Transitions:cubic"><a href="#Fx-Transitions:cubic">Fx.Transitions Method: cubic</a></h2>
      <p class="description">Displays a cubicular transition. Must be used as Cubic.easeIn or Cubic.easeOut or Cubic.easeInOut.</p>
      <h2 id="Fx-Transitions:quart"><a href="#Fx-Transitions:quart">Fx.Transitions Method: quart</a></h2>
      <p class="description">Displays a quartetic transition. Must be used as Quart.easeIn or Quart.easeOut or Quart.easeInOut.</p>
      <h2 id="Fx-Transitions:quint"><a href="#Fx-Transitions:quint">Fx.Transitions Method: quint</a></h2>
      <p class="description">Displays a quintic transition. Must be used as Quint.easeIn or Quint.easeOut or Quint.easeInOut</p>
      <h2 id="Fx-Transitions:pow"><a href="#Fx-Transitions:pow">Fx.Transitions Method: pow</a></h2>
      <p class="description">Used to generate Quad, Cubic, Quart and Quint.</p>
      <h3>Note:</h3>
      <ul>
        <li>The default is <code>p^6</code>.</li>
      </ul>
      <h2 id="Fx-Transitions:expo"><a href="#Fx-Transitions:expo">Fx.Transitions Method: expo</a></h2>
      <p class="description">Displays a exponential transition. Must be used as Expo.easeIn or Expo.easeOut or Expo.easeInOut.</p>
      <h2 id="Fx-Transitions:circ"><a href="#Fx-Transitions:circ">Fx.Transitions Method: circ</a></h2>
      <p class="description">Displays a circular transition. Must be used as Circ.easeIn or Circ.easeOut or Circ.easeInOut.</p>
      <h2 id="Fx-Transitions:sine"><a href="#Fx-Transitions:sine">Fx.Transitions Method: sine</a></h2>
      <p class="description">Displays a sineousidal transition. Must be used as Sine.easeIn or Sine.easeOut or Sine.easeInOut.</p>
      <h2 id="Fx-Transitions:back"><a href="#Fx-Transitions:back">Fx.Transitions Method: back</a></h2>
      <p class="description">Makes the transition go back, then all forth. Must be used as Back.easeIn or Back.easeOut or Back.easeInOut.</p>
      <h2 id="Fx-Transitions:bounce"><a href="#Fx-Transitions:bounce">Fx.Transitions Method: bounce</a></h2>
      <p class="description">Makes the transition bouncy. Must be used as Bounce.easeIn or Bounce.easeOut or Bounce.easeInOut.</p>
      <h2 id="Fx-Transitions:elastic"><a href="#Fx-Transitions:elastic">Fx.Transitions Method: elastic</a></h2>
      <p class="description">Elastic curve. Must be used as Elastic.easeIn or Elastic.easeOut or Elastic.easeInOut</p>
      <h1 id="Fx-Transition"><a href="#Fx-Transition">Class: Fx.Transition</a></h1>
      <p class="description">This class is only useful for math geniuses who want to write their own easing equations.
        Returns an <a href="../../../docs/core/Fx/Fx.html">Fx</a> transition function with 'easeIn', 'easeOut', and 'easeInOut' methods.</p>
      <h3>Syntax:</h3>
      <pre class="javascript"><span class="kw2">var</span> myTransition = <span class="kw2">new</span> Fx.<span class="me1">Transition</span><span class="br0">(</span>transition<span class="br0">[</span>, params<span class="br0">]</span><span class="br0">)</span>;
</pre>
      <h3>Arguments:</h3>
      <ol>
        <li>transition - (<em>function</em>) Can be a <a href="#Fx-Transitions">Fx.Transitions</a> function or a user-provided function which will be extended with easing functions.</li>
        <li>params     - (<em>mixed</em>, optional) Single value or an array for multiple values to pass as the second parameter for the transition function.</li>
      </ol>
      <h3>Returns:</h3>
      <ul>
        <li>(<em>function</em>) A function with easing functions.</li>
      </ul>
      <h3>Examples:</h3>
      <pre class="javascript"><span class="co1">//Elastic.easeOut with user-defined value for elasticity.</span>
<span class="kw2">var</span> myTransition = <span class="kw2">new</span> Fx.<span class="me1">Transition</span><span class="br0">(</span>Fx.<span class="me1">Transitions</span>.<span class="me1">Elastic</span>, <span class="nu0">3</span><span class="br0">)</span>;

<span class="kw2">var</span> myFx = $<span class="br0">(</span><span class="st0">'myElement'</span><span class="br0">)</span>.<span class="me1">effect</span><span class="br0">(</span><span class="st0">'margin'</span>, <span class="br0">{</span>transition: myTransition.<span class="me1">easeOut</span><span class="br0">}</span><span class="br0">)</span>;

</pre>
      <h3>See Also:</h3>
      <ul>
        <li><a href="#Fx-Transitions">Fx.Transitions</a></li>
      </ul>
    </div>
  </div>
<script type="text/javascript" src="../../../assets/mootools-core-1.3.js"></script>
<script type="text/javascript" src="../../../assets/mootools-more-smoothscroll.js"></script>
<script type="text/javascript" src="../../../assets/doc-assist.js"></script>
</body>
</html>
